<script setup lang="ts">
import Account from "./account.vue";
import { ref, onBeforeMount } from "vue";
onBeforeMount(() => {
  // location.href = "http://" + location.host;
});
const loginName = ref(window.Global.loginName);
</script>

<template>
  <div class="login">
    <div class="login-container">
      <!-- <img class="login-logo" src="@/assets/images/logo.png" /> -->
      <div class="login-box">
        <div class="login-intro">
          <img src="@/assets/image/logo_back.png" alt="" />
          <div class="login_title">
            {{ loginName }}
          </div>
        </div>
        <div class="login-form">
          <Account />
        </div>
      </div>
      <div class="login-copyright">
        Copyright © www.yunyangit.com, All Rights Reserved.
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background-image: url("@/assets/image/login.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.login-logo {
  margin-bottom: 68px;
}

.login-box {
  display: flex;
  box-shadow: 0px 0px 20px 0px rgba(191, 191, 191, 0.25);
  border-radius: 6px 6px 6px 6px;
}

.login-intro {
  width: 389px;
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  border-radius: 0 6px 6px 0;

  // background: var(--el-color-primary);
  border-radius: 6px 0 0 6px;
  .login_title {
    font-size: clamp(2rem, 1.67vw, 4rem);
    margin-top: clamp(2.063rem, 1.72vw, 4.125rem);
    color: rgba(0, 71, 138, 1);
  }
}

.login-intro img {
  flex: 0 1 auto;
}

.login-form {
  width: 389px;
  height: 460px;
  flex: 0 1 auto;
  padding: 65px 58px;
  border-radius: 0 6px 6px 0;

  box-sizing: border-box;

  :deep(.el-input) {
    height: 40px;

    .el-input__inner {
      height: 40px;
      line-height: 40px;
    }
  }

  :deep(.el-button) {
    height: 40px;
    margin: 0 18px;
  }
}

.login-copyright {
  color: var(--theme-text-color-info);
  font-size: 12px;
  position: fixed;
  bottom: 16px;
}

@media only screen and (max-width: 992px) {
  .login {
    background-image: none;
  }

  .login-intro {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .login {
    background-image: none;
  }

  .login-container {
    background: #fff;
  }

  .login-intro {
    display: none;
  }

  .login-form {
    flex: 0 1 auto;
    border-radius: 0;
    box-shadow: none;
  }
}
</style>
